<template>
	<view class="container">
		<view class="content">
			<view class="modify_tips">
				<view class="modify_tips_title">修改须知：</view>
				<view class="modify_tips_text">
					修改后会影响物流时效，只能原运费修改且付款后只能修改{{addressFnc.alltimes}}次。还剩{{addressFnc.times}}次</view>
			</view>
			<view class="original_address">
				<view class="content_title">
					<view class=""></view>
					<text>原地址</text>
				</view>
				<view class="original_address_content">

					<view class="original_address_content_top">
						<text>{{addressFnc.orders.receiverName}}</text>{{addressFnc.orders.receiverMobile}}
					</view>
					<view class="original_address_content_bottom">
						{{addressFnc.orders.receiverProvince}}
						{{addressFnc.orders.receiverCity}}
						{{addressFnc.orders.receiverArea}}
						{{addressFnc.orders.receiverLocationAddress}}
						{{addressFnc.orders.receiverAddress}}
					</view>
				</view>
			</view>
			<view class="select_address">
				<view class="select_address_title">
					<view class="content_title">
						<view class=""></view>
						<text>可选择的新收货地址</text>
					</view>
					<view class="select_address_title_btn" @tap="addressFnc.addBtn">添加地址</view>
				</view>
				<view class="select_address_content">
					<view
						:class="['select_address_content_item',addressFnc.chooseAddressId == addressItem.id ? 'select_address_content_item_act' :'']"
						v-for="(addressItem,addressIndex) in addressFnc.canUse" :key="addressItem.id"
						@tap="addressFnc.selectBtn(addressItem)">
						<view class="item_top">
							<view class="item_top_left">
								<text class="item_top_left_tips" v-if="addressItem.isDefault">默认</text>
								<text class="item_top_left_name">{{addressItem.name}}</text>
								<text class="item_top_left_iphone">{{addressItem.mobile}}</text>
							</view>
							<view class="item_top_right" @tap.stop="addressFnc.editBtn(addressItem.id)">
								<text>编辑</text>
								<uni-icons type="right" size="15" color="#1B2120"></uni-icons>
							</view>
						</view>
						<view class="item_bottom">
						{{addressItem.province}}
						{{addressItem.city}}
						{{addressItem.area}}
						{{addressItem.locationAddress}}
						{{addressItem.address}}
						</view>
					</view>
				</view>
				<view class="blank_box" v-if="addressFnc.canUse.length < 1">
					<image :src="iconUrl + '54.png'" mode=""></image>
					<text>没有地址了～</text>
					<view class="xjs-btn-primary" @tap="addressFnc.addBtn">去添加地址</view>
				</view>
			</view>
			<view class="select_address not_select_address" v-if="addressFnc.noUse.length > 0 ">
				<view class="select_address_title">
					<view class="content_title">
						<view class=""></view>
						<text>由于运费变更，以下地址暂时无法选择</text>
					</view>
				</view>
				<view class="select_address_content">
					<view class="select_address_content_item" v-for="(noAddressItem,noAddressIndex) in addressFnc.noUse"
						:key="noAddressItem.id">
						<view class="item_top">
							<view class="item_top_left">
								<text class="item_top_left_tips" v-if="noAddressItem.isDefault">默认</text>
								<text class="item_top_left_name">{{noAddressItem.name}}</text>
								<text class="item_top_left_iphone">{{noAddressItem.mobile}}</text>
							</view>

						</view>
						<view class="item_bottom">{{noAddressItem.province}}{{noAddressItem.city}}{{noAddressItem.area}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom_btn">
			<view class="xjs-btn-primary" @tap="addressFnc.submintBtn">提交修改</view>
		</view>

		<uni-popup ref="popupRef" type="center" :is-mask-click="false" background-color="#fff"
			border-radius="24rpx 24rpx 24rpx 24rpx">
			<view class="pop" v-if="addressFnc.pop">
				<image class="success_icon" :src="iconUrl + '04.png'" mode=""></image>
				<view class="p-title">地址已成功修改至</view>
				<view class="p-content" style="padding: 32rpx 20rpx 60rpx;">
					<view class="p-c-add">
						<view class="p-c-add-top">
							{{addressFnc.popDetail.receiverProvince}}{{addressFnc.popDetail.receiverCity}}{{addressFnc.popDetail.receiverArea}}
						</view>
						<view class="p-c-add-content">{{addressFnc.popDetail.receiverLocationAddress}}{{addressFnc.popDetail.receiverAddress}}</view>
						<view class="p-c-add-bottom">{{addressFnc.popDetail.receiverName}}
							{{addressFnc.popDetail.receiverMobile}}
						</view>
					</view>
				</view>
				<view @click="addressFnc.back" class="xjs-btn-primary-plain p-btn">好的</view>
			</view>
			<view class="pop" v-if="addressFnc.pop2">
				<view class="pop-center">
					<view class="p-content" style="padding: 60rpx 20rpx;">地址修改申请已提交，商家会尽快审核。审核结果将会短信通知您</view>
					<view @click="addressFnc.back" class="xjs-btn-primary-plain p-btn">好的</view>
				</view>
			</view>
			<view class="pop" v-if="addressFnc.pop3">
				<view class="pop-center">
					<view class="p-title">抱歉，地址无法修改</view>
					<view class="p-content" style="padding: 32rpx 20rpx 60rpx;">原因：{{addressFnc.popDetail}}</view>
					<view @click="addressFnc.back" class="xjs-btn-primary-plain p-btn ">好的</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const popupRef = ref()
	onLoad(async (options) => {
		addressFnc.orderId = options.orderId
	})
	onShow(async () => {
		addressFnc.addressData(addressFnc.orderId)
	})
	const addressFnc = reactive({
		addressInfo: {},
		selectIndex: 0,
		orderId: '',
		times: 0,
		alltimes: '',
		orders: '',
		canUse: [],
		noUse: '',
		popDetail: {},
		pop: false,
		pop2: false,
		pop3: false,
		chooseAddressId: -1,
		addressData: async (orderId) => {
			/* /mall/shopping/order/updateOrderAddress/ */
			const res : any = await api({
				method: 'get',
				url: `/mall/shopping/order/updateOrderAddressInfo/${orderId}`
			})
			addressFnc.addressInfo = res.data || {}
			addressFnc.times = res.data.allowUpdateNumber - res.data.alreadyUpdateNumber
			addressFnc.alltimes = res.data.allowUpdateNumber
			addressFnc.orders = res.data.orders
			addressFnc.canUse = res.data.optionalUserAddressVOList
			addressFnc.canUse.forEach((v, i) => {
				if (
					addressFnc.orders.receiverProvince == v.province &&
					addressFnc.orders.receiverCity == v.city &&
					addressFnc.orders.receiverArea == v.area &&
					addressFnc.orders.receiverAddress == v.address &&
					addressFnc.orders.receiverName == v.name &&
					addressFnc.orders.receiverMobile == v.mobile
				) {
					addressFnc.canUse.splice(i, 1)
				}
			})
			addressFnc.noUse = res.data.noOptionalUserAddressVOList
			console.log(addressFnc.canUse.length <= 0 && addressFnc.noUse.length <= 0)
		},
		selectBtn: async (item) => {
			if (addressFnc.chooseAddressId == item.id) { return }
			addressFnc.chooseAddressId = item.id
		},
		addBtn: async () => {
			uni.navigateTo({
				url: '/pages/addressManagement/setAddress/index'
			})
		},
		editBtn: async (id) => {
			uni.navigateTo({
				url: `/pages/addressManagement/setAddress/index?id=${id}`
			})
		},
		submintBtn: async () => {
			if (addressFnc.chooseAddressId == -1) {
				return
			}
			const res : any = await api({
				method: 'get',
				url: `/mall/shopping/order/updateOrderAddress/${addressFnc.orderId}/${addressFnc.chooseAddressId}`
			})
			if (res.code == 0) {
				if (addressFnc.orders.status == 0) { // 代付款
					addressFnc.pop = true
					addressFnc.popDetail = res.data
				} else {
					addressFnc.pop2 = true
				}
			} else {
				addressFnc.pop3 = true
				addressFnc.popDetail = res.msg
			}
			popupRef.value.open()
		},
		goAddAddress() {
			uni.navigateTo({
				url: '/pages/addressManagement/setAddress/index'
			})
		},
		back() {
			popupRef.value.close()
			uni.navigateBack({
				delta: 1
			})
		},

	})
</script>

<style lang="less" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		min-height: 100vh;
		background-color: #F9F6F6;
	}

	.content {
		padding-top: 32rpx;
		width: 686rpx;
		margin: 0 auto;
	}

	.card_box {
		//margin-bottom: 32rpx;
		//padding: 32rpx;

	}

	.content_title {

		display: flex;
		align-items: center;

		view {
			margin-right: 16rpx;
			width: 8rpx;
			height: 32rpx;
			background-color: #FF6084;
			border-radius: 4rpx;
		}

		text {
			font-size: 36rpx;
			color: #1B2120;
			font-weight: bold;
		}
	}

	.modify_tips {
		margin-bottom: 48rpx;
		padding: 24rpx 32rpx;
		border-radius: 24rpx;
		background-color: #fff;
		line-height: 1;

		.modify_tips_title {
			margin-bottom: 24rpx;
			font-size: 30rpx;
			color: #FF6084;
			font-weight: bold;
		}

		.modify_tips_text {
			margin-top: -6rpx;
			font-size: 24rpx;
			color: #5C5E5E;
			line-height: 1.4;
		}
	}

	.original_address {
		margin-bottom: 48rpx;

		.original_address_content {
			margin-top: 24rpx;
			padding: 40rpx 32rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.original_address_content_top {
				margin-bottom: 32rpx;
				color: #1B2120;
				font-size: 28rpx;

				text {
					margin-right: 24rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

			}

			.original_address_content_bottom {
				margin-top: -6rpx;
				font-size: 28rpx;
				color: #7C807F;
				line-height: 1.4;

			}
		}
	}

	.select_address {
		.select_address_title {
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select_address_title_btn {
				padding: 16rpx;
				background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
				border-radius: 62rpx;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}

		.select_address_content {
			.select_address_content_item {
				margin-bottom: 24rpx;
				padding: 40rpx 32rpx;
				background-color: #fff;
				border-radius: 24rpx;

				.item_top {
					margin-bottom: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item_top_left {
						display: flex;
						align-items: flex-end;

						.item_top_left_tips {
							padding: 8rpx 12rpx;
							background: linear-gradient(90deg, #FFA6BC 0%, #FFA3A3 100%);
							border-radius: 200rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-right: 24rpx;
						}

						.item_top_left_name {
							margin-right: 24rpx;
							font-size: 36rpx;
							color: #1B2120;
							font-weight: bold;
						}

						.item_top_left_iphone {
							font-size: 28rpx;
							color: #1B2120;
						}
					}

					.item_top_right {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							color: #1B2120;
						}
					}
				}

				.item_bottom {
					margin-top: -6rpx;
					font-size: 28rpx;
					color: #7C807F;
					line-height: 1.4;
				}
			}

			.select_address_content_item_act {
				background-color: #FFF2F1;
				border: 2rpx solid #FF6084;

			}

		}

		.blank_box {
			margin-bottom: 60rpx;
			padding: 48rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 24rpx;

			image {
				width: 350rpx;
				height: 282rpx;

			}

			text {
				margin: 32rpx 0 24rpx 0;
				font-size: 32rpx;
				color: #1B2120;
			}

			view {
				width: 260rpx;
			}
		}
	}

	.pop {
		width: 686rpx;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 32rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.success_icon {
			width: 120rpx;
			height: 120rpx;
			margin-top: 60rpx;
		}

		.p-title {
			padding: 20rpx 20rpx 0;
			font-size: 32rpx;
			color: #333;
		}

		.p-content {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;

			.p-c-add {
				text-align: left;
				background-color: #F8F8F8;
				border-radius: 18rpx;
				padding: 20rpx;
				line-height: 1.4;
				
				.p-c-add-content {
					margin: 18rpx 0;
					color: #1B2120;
					font-weight: bold;
					font-size: 32rpx;
					
				}
			}
		}
		.p-btn {
			//border-top: 1px solid #E5E5E5;
			font-size: 32rpx;
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 8rpx 32rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1rpx solid #E6F6F6;
	}
</style>